<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>云端花屋</title>
    <script src="${pageContext.request.contextPath}/js/jquery.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/main.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap/css/bootstrap.min.css">
    <script src="${pageContext.request.contextPath}/css/bootstrap/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/sort.js"></script>
    <script src="${pageContext.request.contextPath}/js/holder.js"></script>
    <style>
        .like-button {
            left: 70% !important;
            top: 65% !important;
        }

        .data > ul {
            padding: 0;
        }

        .page-div {
            margin-top: 10px;
        }

        .page-info {
            padding: 35px 35px 35px 55px;
        }

        .data-card {
            width: 100%;
            height: 100%;
            margin-top: 10px;
            padding: 10px;
            border-radius: 16px;
            box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px;
        }

        .data-card-img {
            width: 180px;
            height: 200px;
            border-radius: 16px;
        }

        .data-card-img:hover {
            border-radius: 16px;
        }

        .data-card-img-box :hover {
            background-color: #0e0e0e;
            transition: transform .8s cubic-bezier(0.23, 1, 0.32, 1), box-shadow .8s cubic-bezier(0.23, 1, 0.32, 1);
            transform: scale(1.05);
            z-index: 2;
            border-radius: 16px;
        }

        .data-card-text {
            width: 100%;
            display: flex;
            padding-top: 8px;
            align-items: center;
            flex-direction: row;
            justify-content: space-around;
        }
    </style>
</head>
<body>
<div id="main" class="container">
    <div id="header">
        <jsp:include page="header.jsp"/>
    </div>
    <div class="content">
        <div class="module">
            <div class="">
                <h3>
                    类别><span style="color: red;">${keyword}</span>
                </h3>
                <hr>
            </div>

            <div class="bd">
                <div class="data">
                    <ul >
                        <c:forEach items="${pageInfo.list}" var="goods">
                            <li class="data-item-li">
                                <div class="data-card">
                                    <div class="data-card-img-box">
                                        <a href="${pageContext.request.contextPath}/detail?goodsid=${goods.goodsid}">
                                            <img src="${pageContext.request.contextPath}/pictures/${goods.imagePaths[0].path}"
                                                 class="data-card-img" alt=""/>
                                        </a>
                                    </div>

                                    <div class="data-card-text">
                                        <div style="display: inline-block;font-size: 20px;color: #c0c0c0">
                                            <a style="color: #3c3c3c" href="${pageContext.request.contextPath}/detail?goodsid=${goods.goodsid}">${goods.goodsname}</a>
                                        </div>
                                        <div style="display: inline-block;font-size:16px ;color: red">
                                            <b>￥${goods.price}</b>
                                        </div>
                                    </div>
                                    <div>
                                        <c:if test="${goods.fav}">
                                            <button
                                                    class="like-button glyphicon glyphicon-heart btn btn-default"
                                                    data-id="${goods.goodsid}"
                                                    style="display: none;"></button>
                                        </c:if>
                                        <c:if test="${!goods.fav}">
                                            <button
                                                    class="like-button glyphicon glyphicon-heart-empty btn btn-default"
                                                    data-id="${goods.goodsid}"
                                                    style="display: none;"></button>
                                        </c:if>
                                        <!-- <button class="like-button1 glyphicon glyphicon-heart-empty btn btn-default "></button> -->
                                    </div>
                                </div>
                            </li>
                        </c:forEach>

                        <div class="clear-float" style="clear: both;"></div>
                    </ul>
                </div>
<%--                <div class="row page-div">--%>
<%--                    <div class="col-md-5 page-info">--%>
<%--                        当前第${pageInfo.pageNum}页，共${pageInfo.pages}页，总共${pageInfo.size}条记录--%>
<%--                    </div>--%>
<%--                    <div class="col-md-6">--%>
<%--                        <nav aria-label="Page navigation">--%>
<%--                            <ul class="pagination pagination-lg">--%>

<%--                                <c:if test="${pageInfo.hasPreviousPage}">--%>
<%--                                    <li>--%>
<%--                                        <a style="background: #0f0f0f" href="${pageContext.request.contextPath}/search?cateid=${key}&page=${pageInfo.prePage}"--%>
<%--                                           aria-label="Previous">--%>
<%--                                            <span aria-hidden="true">&laquo;</span>--%>
<%--                                        </a>--%>
<%--                                    </li>--%>
<%--                                </c:if>--%>

<%--                                <c:if test="${!pageInfo.hasPreviousPage}">--%>
<%--                                    <li style="background: #0f0f0f" class="disabled">--%>
<%--                                        <a href="${pageContext.request.contextPath}/search?cateid=${key}&page=${pageInfo.prePage}"--%>
<%--                                           aria-label="Previous">--%>
<%--                                            <span aria-hidden="true">&laquo;</span>--%>
<%--                                        </a>--%>
<%--                                    </li>--%>
<%--                                </c:if>--%>

<%--                                <c:forEach items="${pageInfo.navigatepageNums}" var="pageNums">--%>
<%--                                    <c:if test="${pageNums == pageInfo.pageNum}">--%>
<%--                                        <li class="active"><a--%>
<%--                                                href="${pageContext.request.contextPath}/search?cateid=${key}&page=${pageNums}">${pageNums}</a>--%>
<%--                                        </li>--%>
<%--                                    </c:if>--%>
<%--                                    <c:if test="${pageNums != pageInfo.pageNum}">--%>
<%--                                        <li>--%>
<%--                                            <a href="${pageContext.request.contextPath}/search?cateid=${key}&page=${pageNums}">${pageNums}</a>--%>
<%--                                        </li>--%>
<%--                                    </c:if>--%>
<%--                                </c:forEach>--%>

<%--                                <c:if test="${pageInfo.hasNextPage}">--%>
<%--                                    <li>--%>
<%--                                        <a href="${pageContext.request.contextPath}/search?cateid=${key}&page=${pageInfo.nextPage}"--%>
<%--                                           aria-label="Next">--%>
<%--                                            <span aria-hidden="true">&raquo;</span>--%>
<%--                                        </a>--%>
<%--                                    </li>--%>
<%--                                </c:if>--%>

<%--                                <c:if test="${!pageInfo.hasNextPage}">--%>
<%--                                    <li class="disabled">--%>
<%--                                        <a href="${pageContext.request.contextPath}/search?cateid=${key}&page=${pageInfo.nextPage}"--%>
<%--                                           aria-label="Next">--%>
<%--                                            <span aria-hidden="true">&raquo;</span>--%>
<%--                                        </a>--%>
<%--                                    </li>--%>
<%--                                </c:if>--%>
<%--                            </ul>--%>
<%--                        </nav>--%>
<%--                    </div>--%>
<%--                </div>--%>
            </div>
        </div>
    </div>
</div>
</body>
</html>

